var $roll;
var $rollLight;
var $itemDark;
var $itemLight;
var itemLength;
var now = 0;
var indexClass = 0;

Zepto(rollFn);

function rollFn() {
  $roll = Zepto('#index-roll');
  $rollLight = Zepto('#index-roll-light');
  $itemDark = Zepto('.index-roll-item-dark');
  $itemLight = Zepto('.index-roll-item-light');
  itemLength = $itemDark.length;
  // plus();
  bind();
}

function rotateFn(deg) {
  $roll.css({
    'transform': 'rotate3d(1, 0, 0, '+ deg +'deg) translate3d(0px, 0px, 0px);',
    '-webkit-transform': 'rotate3d(1, 0, 0, '+ deg +'deg) translate3d(0px, 0px, 0px);',
    '-moz-transform': 'rotate3d(1, 0, 0, '+ deg +'deg) translate3d(0px, 0px, 0px);',
    '-ms-transform': 'rotate3d(1, 0, 0, '+ deg +'deg) translate3d(0px, 0px, 0px);',
    '-o-transform': 'rotate3d(1, 0, 0, '+ deg +'deg) translate3d(0px, 0px, 0px);',
  });
  $rollLight.css({
    'transform': 'rotate3d(1, 0, 0, '+ deg +'deg) translate3d(0px, 0px, 0px);',
    '-webkit-transform': 'rotate3d(1, 0, 0, '+ deg +'deg) translate3d(0px, 0px, 0px);',
    '-moz-transform': 'rotate3d(1, 0, 0, '+ deg +'deg) translate3d(0px, 0px, 0px);',
    '-ms-transform': 'rotate3d(1, 0, 0, '+ deg +'deg) translate3d(0px, 0px, 0px);',
    '-o-transform': 'rotate3d(1, 0, 0, '+ deg +'deg) translate3d(0px, 0px, 0px);',
  });

  // setTimeout(plus, 30);
}

function bind() {
  var backupClientY = 0;
  Zepto('#index-roll-box').on('touchstart', function(ev) {
    backupClientY = ev.changedTouches[0].clientY;
    Zepto(document).on({
      touchmove: function(ev) {
          if (backupClientY > ev.changedTouches[0].clientY) {
          plus();
        } else {
          reduce();
        }
        ev.changedTouches[0].clientY;
        backupClientY = ev.changedTouches[0].clientY;
      },
      touchend: function() {
        Zepto(document).off('touchmove touchend');
      }
    });
  });
}

function reduce() {
  now-=2;
  rotateFn(now)
}

function plus() {
  now+=2;
  rotateFn(now)
}
